<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击发出ajax</button>
    <script>
      // ajax发送 分2个过程 1.发送的过程（4步）；2.返还的过程；(readyState)
      // 发送过程  0-4；从客户端发送到服务端
      /*
      	0：请求未初始化（还没有调用 open()）。
      	1：请求已经建立，但是还没有发送（还没有调用 send()）。
      	2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
      	3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
      	4：响应已完成；您可以获取并使用服务器的响应了。  //发送已经成功
      */

      // 服务端到客户端的状态；返还状态码；
      // 1开头的都是和等待有关   2.成功  3. 重定向 4.页面不存在 5 服务器错误
      /*
      200：ok，页面正确打开，并得到完整的响应内容。
      301：被请求的资源已永久移动到新位置
      302：请求的资源临时从不同的 URI响应请求
      304：缓存
      404：页面不存在。
      500：常指后端代码发生错误
      503：由于临时的服务器维护或者过载，服务器当前无法处理请求。
      */

      //发送get请求的ajax get的ajax
      let btn = document.querySelector("button");
      btn.onclick = function () {
        // 1.创建对象
        let xhr = new XMLHttpRequest();
        // 2.打开 第一个参数是请求方式 第二个参数是地址（api，接口） 第三个参数是是否异步 ，默认是true 异步操作；
        // 相对地址 开发的时候用相对地址；
        console.log(xhr.readyState);
        xhr.open("get", "./get.php", true);
        console.log(xhr.readyState);
        // 监控ajax发送到服务器的状态 ；
        xhr.onreadystatechange = function () {
          console.log(xhr.readyState);
          console.log(xhr.status);
          if (xhr.readyState == 4 && xhr.status == 200) {
            // 		console.log(xhr.responseText);
          }
        };
        // xhr.open("get","http://localhost/2113/ajax02/get.php");实际地址本地
        xhr.onload = function () {
          //代表 1.readyState===4  && 2.status===200
          // console.log(xhr.readyState ,xhr.status);
          console.log(xhr.responseText);
          // json转换的问题；
          let data = JSON.parse(xhr.responseText);
          console.log(data);
        };
        xhr.send();
      };
      // JSON.parse 只能转纯json数据；
      // var str = '111{"name":"张三","age":"20"}22';
      // var res = JSON.parse(str);
      // console.log(res);
    </script>
  </body>
</html>
